<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a="http://richfaces.org/a4j"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="/users/users-frame.xhtml">

	<ui:param name="pageTitle"
		value="#{messages['page.users.create.title']}" />

	<ui:define name="subheader">#{messages['page.users.create.subheader']}</ui:define>

	<ui:define name="main">
		<h:form id="userEditForm">
			<rich:panel id="userEditPanel">
				<f:facet name="header">
					<h:outputText value="#{messages['page.users.create.panel.title']}" /> 
				</f:facet>

				<s:decorate id="userUsernameDecoration"
					template="/layout/edit.xhtml">
					<ui:define name="label">#{messages['user.username']}:</ui:define>
					<h:inputText required="true" id="username" value="#{user.username}"
						style="width:300px;"
                        validatorMessage="#{messages['validator.username']}">
                        <f:validateLength minimum="5"/>
                    </h:inputText>    
				</s:decorate>

				<s:decorate id="userEmailDecoration" template="/layout/edit.xhtml">
					<ui:define name="label">#{messages['user.email']}:</ui:define>
					<h:inputText value="#{user.email}" required="true" id="email"
						style="width:300px;"
                        validatorMessage="#{messages['validator.email']}">
                        <f:validator validatorId="emailValidator"/>
                    </h:inputText>
				</s:decorate>

				<s:decorate id="userPasswordDecoration"
					template="/layout/edit.xhtml">
					<ui:define name="label">#{messages['user.password']}:</ui:define>
					<h:inputSecret value="#{password}" required="true" id="password"
						style="width:300px;"
                        validatorMessage="#{messages['validator.password']}">
                        <f:validateLength minimum="5"/>
                    </h:inputSecret>
				</s:decorate>

				<s:decorate id="userConfirmDecoration" template="/layout/edit.xhtml">
					<ui:define name="label">#{messages['user.password.confirm']}:</ui:define>
					<h:inputSecret value="#{confirm}" required="true" id="cofirm"
						style="width:300px;"
                        validatorMessage="#{messages['validator.password']}">
                        <f:validateLength minimum="5"/>
                    </h:inputSecret>
				</s:decorate>

				<c:set var="selectedRole" value=""></c:set>
				<s:decorate id="userRoleDecoration" template="/layout/edit.xhtml">
					<ui:define name="label">#{messages['user.role']}:</ui:define>

					<h:selectOneMenu value="#{selectedRole}" required="true"
						id="roleOption" style="width:300px;">
						<s:selectItems var="r" value="#{userBean.roles}" label="#{r}" />
					</h:selectOneMenu>
				</s:decorate>


				<s:decorate template="/layout/buttonbox.xhtml" id="personButtonBox">
					<h:commandButton action="#{userBean.save(user, selectedRole)}"
						value="#{messages['general.save']}" id="save" />
					<s:button action="#{userBean.refresh(user)}"
						value="#{messages['general.back']}" view="/users/index.xhtml"
						id="back" />
				</s:decorate>
			</rich:panel>
		</h:form>
	</ui:define>
</ui:composition>
